<template>
  <div style="max-width: 1080px; margin: 16px auto;">
    <a-card :title="cardTitle">
      <a-space>
        <a-select v-model:value="refType" style="width: 140px" :options="[
          { label: '文章', value: 'article' },
          { label: '简历', value: 'resume' }
        ]" />
        <a-input-number v-model:value="entityId" :min="1" :placeholder="refType === 'article' ? '文章ID' : '用户ID'" />
        <a-button type="primary" @click="load">查询</a-button>
        <router-link :to="{ name: 'AdminOss' }">前往 OSS 管理</router-link>
      </a-space>
      <a-divider />
      <div v-if="!list.length" class="muted">暂无引用</div>
      <a-list v-else :data-source="list" :grid="{ gutter: 12, xs:1, sm:2, md:3, lg:4 }">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-card :hoverable="true">
              <a-image :src="item" :width="200" />
              <div class="url" :title="item">{{ item }}</div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import http from '@/api/http'
import type { ApiResponse } from '@/types/api'

const refType = ref<'article' | 'resume'>('article')
const entityId = ref<number | null>(null)
const list = ref<string[]>([])

async function load() {
  if (!entityId.value) { list.value = []; return }
  const resp = await http.get<ApiResponse<string[]>>('/admin/oss/references', { params: { type: refType.value, id: entityId.value } })
  if (resp.data.code === 0) list.value = resp.data.data || []
}

const cardTitle = computed(() => refType.value === 'article' ? '文章资源引用' : '简历资源引用')
</script>

<style scoped>
.muted { color: rgba(0,0,0,0.45); }
.url { margin-top: 6px; font-size: 12px; color: rgba(0,0,0,0.6); word-break: break-all; }
</style>
